
<li id="category-table-body" data-sort-url="{{ path('admin_article_category_sort') }}">
    {% if categories is not empty %}
        {{ _self.showCategoryTree(categories, false) }}
    {% else %}
        <div class="row empty">{{'site.datagrid.empty'|trans}}</div>
    {% endif %}
</li>

{% do load_script('category/tbody') %}


{% macro showCategoryTree(categories, isCollapseChildren) %}
    <ul class="list-table sortable-list" data-group-id="{{ categories[0]['parentId'] }}">
        {% for category in categories %}
            {% set isParent = category.children|default(null) is not empty %}
            {% set isRoot = category.depth == 1 %}
            <li id="{{ category.id }}" class="tr" data-name="{{ category.name }}" data-id="{{ category.id }}" data-parent-id="{{ category.parentId }}" style="display: {{ (not isRoot and isCollapseChildren) ? 'none' : 'block' }}">
                <div class="row{{ (isParent and isCollapseChildren) ? ' row-collapse' : ' row-expand' }}">
                    <div class="td col-md-3 name sort-handle" style="padding-left: {{ 24 * (category.depth - 1 ) }}px; overflow: hidden">
                        {% if isParent %}
                            <i class="list-table-tree-icon glyphicon glyphicon-chevron-{{ isCollapseChildren ? 'right' : 'down' }}"></i>
                        {% else %}
                            <i class="list-table-tree-icon"></i>
                        {% endif %}
                        {{ category.name }}
                    </div>
                    <div class="td col-md-4 url"><a href="{{ path('article_category', {categoryCode: category.code }) }}" target="_blank">{{ path('article_category', {categoryCode: category.code }) }}</a></div>
                    <div class="td col-md-3 code">{{ category.code }}</div>
                    <div class="td col-md-2 operation">
                        <a href="javascript:;" class="btn btn-default btn-sm" data-url="{{ path('admin_article_category_edit', {id:category.id}) }}" data-toggle="modal" data-target="#modal"><i class="glyphicon glyphicon-edit"></i> {{'admin.operation_article.edit_btn'|trans}}</a>
                        {% if category.depth < 5 %}
                        <a href="javascript:;" class="btn btn-default btn-sm" data-url="{{ path('admin_article_category_create', {parentId:category.id}) }}" data-toggle="modal" data-target="#modal"><i class="glyphicon glyphicon-plus"></i> {{'admin.operation_article.add_child_category_btn'|trans}}</a>
                        {% endif %}
                    </div>
                </div>
                {% if isParent %}
                    {{ _self.showCategoryTree(category.children, isCollapseChildren) }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}
